<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>消息列表页面</title>
		<link rel="stylesheet" href="layui/css/layui.css" media="all">

		<style>
			.layui-btn:not(.layui-btn-lg):not(.layui-btn-sm):not(.layui-btn-xs) {
				height: 34px;
				line-height: 34px;
				padding: 0 8px;
			}
		</style>
	</head>
	<body>
		<div class="layuimini-container">
			<div class="layuimini-main">
				<div class="layui-form" style="margin-top: 20px;" onsubmit="false">
					<div class="layui-form-item">
						<label class="layui-form-label">发送者ID:</label>
						<div class="layui-input-inline">
							<input type="text" name="messender" id="messender" placeholder="请输入发送者ID" class="layui-input">
						</div>
						<div id="messendtime">
							<label class="layui-form-label">发送时间:</label>
							<div class="layui-input-inline" style="width: 150px;">
								<input type="text" name="messendtime_min" id="messendtime_min" placeholder="起始时间"
									autocomplete="off" class="layui-input">
							</div>
							<div class="layui-form-mid">-</div>
							<div class="layui-input-inline" style="width: 150px;">
								<input type="text" name="messendtime_max" id="messendtime_max" placeholder="结束时间"
									autocomplete="off" class="layui-input">
							</div>
						</div>
						<label class="layui-form-label">消息状态:</label>
						<div class="layui-input-inline" style="width: 120;">
							<select name="messtate" id="messtate" class="layui-input">
								<option value="">请选择</option>
								<option value="已读">已读</option>
							    <option value="未读">未读</option>
							</select>


						</div>
             <button type="submit" class="layui-btn" lay-submit lay-filter="data-search-btn">搜索</button>					</div>
					<div>
						<table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>
					</div>
				</div>
			</div>
</div>

			<!-- 操作列 -->
			<script type="text/html" id="barDemo">
				<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
				<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
			</script>
			<script type="text/html" id="toolbarDemo">
				<!--表头上面引入了一个添加角色的操作-->
			<div class="layui-btn-container">
				<button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add"> 发送消息 </button>
			</div>
			</script>
			<script src="layui/layui.js" charset="utf-8"></script>
			<script src="js/Global.js" type="text/javascript" charset="utf-8"></script>
			<script>
						layui.use([ 'laydate','form', 'table' ],  function() { //如果只加载一个模块，可以不填数组。如：layui.use('form')
							var table = layui.table; //获取table模块
							var form = layui.form;
							var $ = layui.jquery;
							var laydate = layui.laydate;
							//日期时间选择器
							laydate.render({ 
							  elem: '#messendtime_min'
							  ,type: 'datetime'
							});
							laydate.render({ 
								  elem: '#messendtime_max'
								  ,type: 'datetime'
								});
							// 渲染表格
							table.render({
								elem : '#currentTableId',
								url: globalData.server + 'public/getAll',
								toolbar: '#toolbarDemo',
								defaultToolbar: ['filter', 'exports', 'print', {
									title: '提示',
									layEvent: 'LAYTABLE_TIPS',
									icon: 'layui-icon-tips'
								}],
								cols : [ [ {
										field : 'mesid',
										title : '消息ID',
										fixed : 'left',
										align:'center',
										sort : true,
										width : 120,
									}, {
										field : 'senderName',
										title : '发送人',
										align:'center',
										width : 120,
									}, {
										field : 'receiverName',
										title : '接收人',
										align:'center',
										width : 120,
									}, {
										field : 'mescontent',
										title : '消息内容',
										align:'center',
										width : 120,
									}, {
										field : 'messtate',
										title : '消息状态',
										align:'center',
										width : 120,
									}, {
										field : 'stuname',
										title : '学生姓名',
										align:'center',
										width : 90,
									}, {
										field : 'messendtime',
										title : '发送时间',
										templet : "<div>{{layui.util.toDateString(d.messendtime, 'yyyy-MM-dd HH:mm:ss')}}</div>", 
										align:'center',
										width : 170,
									},{
										field : 'mesremarks',
										title : '消息备注',
										align:'center',
										width : 100,
									}, {
										title : '操作',
										fixed : 'right',
										align : 'center',
										toolbar : '#barDemo',
										width : 180
									} ] ],
									/* id : 'testReload', */
									page : true
								});
			
							// 监听搜索操作
							form.on('submit(data-search-btn)', function(data) {
								//执行搜索重载
								table.reload('currentTableId', {
									where: {
										'messender': data.field.messender,
										'mesreceiver': data.field.mesreceiver,
										'messtate': data.field.messtate,
										'messendtime_min': data.field.messendtime_min,
										'messendtime_max': data.field.messendtime_max
									}
								});
								return false;
							});
			
							/**
							 * toolbar监听事件
							 */
							table.on('toolbar(currentTableFilter)', function(obj) {
								if(obj.event === 'add') { // 监听添加操作
									var index = layer.open({
										title: '添加',
										type: 2,
										shade: 0.2,
										maxmin: true,
										shadeClose: true,
										area : [ '1150px', '500px' ], //页面的宽高
										content: 'Messages_add.html',
										end: function() {
											window.location.reload();
										}
									});
									$(window).on("resize", function() {
										layer.full(index);
									});
								}
							});
			
							//监听表格复选框选择
							table.on('checkbox(currentTableFilter)', function(obj) {
								console.log(obj)
							});
			
							table.on('tool(currentTableFilter)', function(obj) {
								var data = obj.data;
								if(obj.event === 'edit') {
									var index = layer.open({
										title: '修改',
										type: 2,
										shade: 0.2,
										maxmin: true,
										shadeClose: true,
										area : [ '700px', '500px' ], //页面的宽高
										content: 'Messages_edit.html',
										success: function(layero, index) {
											var body = layer.getChildFrame('body', index);
											body.find("#mesid").val(data.mesid);
											body.find("#mesreceiver").val(data.receiverName);
											body.find("#messtuid").val(data.stuid);
											body.find("#stuname").val(data.stuname);
											body.find("#mescontent").val(data.mescontent);
											body.find("#mesremarks").val(data.mesremarks);
										},
										end: function() {
											window.location.reload();
										}
									});
									$(window).on("resize", function() {
										layer.full(index);
									});
								} else if(obj.event === 'del') {
									layer.confirm('确定要删除 ' + data.stuname + ' 同学的消息信息吗?', function(index) {
										$.post(globalData.server + "public/delete", {
											"mesid": data.mesid
										}, function(res) {
											if(res.data) {
												layer.msg("删除成功", {
													icon: 1,
													time: 3000
												});
												obj.del();
											} else {
												layer.msg("删除失败", {
													icon: 2,
													time: 3000
												})
											}
										}, "json");
										obj.del();
										layer.close(index);
									});
								}
							});
			
						});
					</script>
	</body>
</html>
